<template>
  <div class="component-list" @dragstart="handleDragStart">
    <div
      v-for="(item, index) in componentList"
      :key="index"
      class="item"
      draggable
      :data-index="index"
      :class="`icon-${areaTypeComponent[item.type].toLocaleLowerCase()}`"
      @click="handleAddArea(index)"
    >
      <svg-icon :icon-class="areaTypeComponent[item.type].toLocaleLowerCase()" />
      <div class="text">{{ areaTypeName[item.type] }}</div>
    </div>
  </div>
</template>

<script>
import { componentList, areaTypeComponent, areaTypeName } from '@/custom-component/component-list'
import { generateID } from '@/utils/utils'
import { changeComponentSizeWithScale } from '@/utils/changeComponentsSizeWithScale'

export default {
  data() {
    return {
      componentList,
      areaTypeComponent,
      areaTypeName,
    }
  },
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('index', e.target.dataset.index)
    },
    handleAddArea(index) {
      const component = JSON.parse(JSON.stringify(componentList[index]))

      // 根据画布实际宽高设置 组件初始宽高
      const canvasWidth = this.$store.state.canvasStyleData[this.$store.state.curCanvasPageIndex].width

      // 设置组件的初始宽度为画布宽度的一半
      const initialComponentWidth = canvasWidth / 2
      const initWidth = initialComponentWidth > 200 ? 200 : initialComponentWidth

      // 应用新的初始宽高
      component.width = initWidth
      component.height = initWidth

      component.top = 0
      component.left = 0
      component.id = generateID()

      // 根据画面比例修改组件样式比例
      changeComponentSizeWithScale(component)

      this.$store.commit('addComponent', { component })
      // this.$store.commit('recordSnapshot')
    },
  },
}
</script>

<style lang="scss" scoped>
.component-list {
  opacity: 1;
  position: relative;
  transition: all 0.5s 0.5s;
  display: flex;

  .item {
    width: 80px;
    height: 40px;
    text-align: center;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.8;
    &:hover {
      opacity: 1;
      transform: scale(1.2);
    }
    .text {
      margin-left: 5px;
    }
  }
  .icon-picture {
    color: #4bb814;
    .svg-icon {
      fill: #4bb814 !important;
    }
  }
  .icon-videocomponent {
    color: #b87e14;
    .svg-icon {
      fill: #b87e14 !important;
    }
  }
  .icon-subtitles {
    color: #b81414;
    .svg-icon {
      fill: #b81414 !important;
    }
  }
  .icon-clock {
    color: #9f14b8;
    .svg-icon {
      fill: #9f14b8 !important;
    }
  }
}
</style>
